<template>
  <el-dialog
      v-model="isShow"
      :title="title"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :width="'42%'"
      @close="onClose">
    <template v-slot:header>
      <div style="display: flex; flex-direction: row; align-items: center; color: black">
        <span>{{headText}}</span>
        <span v-if="mode=='MOVE' && current" style="padding: 0 8px;">到</span>
        <span v-if="mode=='MOVE' && current" style="color: #409eff">{{current.name}}</span>
      </div>
    </template>
    <LevelSelector
        ref="refLevel"
        :columns="columns"
        :load="loadData"
        :search-form="searchForms"
        :root-item="props.rootItem"
        :level-mode="props.levelMode"
        :finish-label="props.finishLabel ? props.finishLabel : '完成'"
        :pagination="pagination"
        :finish-select="onFinishSelect"
        :mode="props.mode"
        :click-row="clickRow"
        :select-changed="onSelectChanged"
    />
  </el-dialog>
</template>

<script lang="ts" setup>
import {computed, nextTick, onMounted, ref, toRaw} from 'vue'
import LevelSelector from '@/widget/selector/LevelSelector.vue'

interface LevelConfig {
  tag?: string;
  load: any;
  mode?: string;
  title?: string;
  levelColumns?: any;
  levelMode?: boolean;
  rootItem?: any;
  finishLabel?: string;
  finishSelect?: any;
  levelClose?: any;
  selectChanged?: any;
}

const refLevel = ref()
const props = defineProps<LevelConfig>()
const isShow = ref(false)
const headText = ref(props.title)
const current = ref()
const tailText = ref()

const searchForms: any = ref([]);

onMounted(() => {
  searchForms.value = [
    {
      type: 'input',
      name: 'name',
      label: `${props.tag}名称`,
      size: 'default',
      placeholder: `请输入${props.tag}名称`,
      clearable: true,
      value: '',
      defValue: ''
    }
  ];
})

const onCurrentChanged = (item: any) => {
  if (!props.mode || props.mode === 'MOVE') {
    headText.value = props.title
  }
}

const loadData = async (params: any) => {
  if (props.load) {
    return await props.load(params)
  }
}

const onClose = () => {
  isShow.value = false;
  if (props.levelClose) {
    props.levelClose();
  }
}

const onFinishSelect = (item: any) => {
  onClose()
  if (props.finishSelect) {
    props.finishSelect(item)
  }
}

const getSelectedItem = () => {
  return refLevel.value.getCurrent()
}

const select = () => {
  isShow.value = true;
  current.value = '';
  nextTick(() => refLevel.value?.reloadData());
}

const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0
})

const columns = computed(() => {
  if (props.levelColumns) {
    return props.levelColumns;
  } else {
    const retCols: any = [
      {
        id: 'id',
        name: '标识',
        hide: 'true'
      },
      {
        id: 'name',
        name: '名称'
      },
    ];

    if (props.levelMode) {
      retCols.push({
        type: 'icon'
      });
    }

    return retCols;
  }
})

const updateTitle = (t: string) => {
  headText.value = t;
}

const onSelectChanged = (item: string) => {
  current.value = item;
}

const clickRow = (row: any) => {
  refLevel.value.routeToItem(toRaw(row))
  onCurrentChanged(row)
}

defineExpose({
  select,
  updateTitle,
  getSelectedItem
})
</script>

<style scoped>
.dialog-footer {
  margin-right: 16px;
}

.dialog-footer button:first-child {
  margin-right: 16px;
}
</style>
